<!DOCTYPE html>
<html lang="en">

<head>
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta charset="utf-8">
    <title>Contact</title>
    <meta name="keywords" />
    <meta name="description" />
    <meta name="format-detection" content="telephone=no">
    <link rel="shortcut icon" href="./images/zh_CN.ico" type="image/x-icon" />
    <link rel="stylesheet" href="./css/animate.min.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/aos.css">
    <link rel="stylesheet" href="./css/swiper.css">
    <link rel="stylesheet" href="./css/contact.css">
</head>

<body>
    <div class="home">

        <div class="header">
            <a href="index.html" class="logo">
                <img src="./images/logo.png" alt="">
            </a>
            <div class="links f_18">
                <a href="./about.html">about</a>
                <a href="./products.html">products</a>
                <a href="./solutions.html">solutions</a>
                <a href="./cases.html">cases</a>
                <a class="on" href="./contact.html">contact</a>
            </div>
        </div>


        <div class="pheader">
            <div class="menu">
                <div class="l">
                    <a href="./index.html" target="_self" class="animated fadeInUpLeft">
                        <img src="./images/logo.png" alt="">
                    </a>
                </div>
                <div class="navbox">
                    <div class="line"></div>
                    <div class="line"></div>
                    <div class="line"></div>
                </div>
            </div>
        </div>

        <div class="menuList">
            <div class="item">
                <div class="tb">
                    <a href="./index.html">Home</a>
                </div>
            </div>
            <div class="item">
                <div class="tb">
                    <a href="./about.html">about</a>
                </div>
            </div>
            <div class="item">
                <div class="tb">
                    <a href="./products.html">
                        products
                    </a>
                </div>
            </div>
            <div class="item">
                <div class="tb">
                    <a href="./solutions.html">
                        solutions
                    </a>
                </div>
            </div>
            <div class="item">
                <div class="tb">
                    <a href="./cases.html">
                        cases
                    </a>
                </div>
            </div>
            <div class="item">
                <div class="tb">
                    <a href="./contact.html">
                        contact
                    </a>
                </div>
            </div>
        </div>

        <div class="bg1">
            <img src="./images/bg1.png" alt="">
        </div>

        <div class="bg2">
            <img src="./images/bg_line.png" alt="">
        </div>

        <div class="bg3">
            <img src="./images/bg4.png" alt="">
        </div>


        <div class="main">

            <div class="title">
                <h1 class="f_96" aos="scale-opacity">contact us</h1>
                <div class="tag f_24" aos="scale-opacity">
                    Take technological innovation as the core driving force
                </div>
            </div>


            <div class="section1">
                <div class="l">
                    <h1 class="f_48" aos="scale-opacity">Singapore</h1>
                    <div class="des f_24" aos="scale-opacity">
                        Address: No. 810, Yishan Road, Shanghai<br>
                        Tel: +86-21-54262851, 54262853, 54262850<br>
                        E-mail：rfid@sh-rfid.com<br>
                        Hotline: 4000089558
                    </div>
                </div>
                <div class="r">
                    <div class="pic1">
                        <img src="./images/map.png" alt="" aos="scale-opacity">
                    </div>
                    <div class="pic2">
                        <img src="./images/add.png" alt="" aos="scale-opacity">
                    </div>
                </div>
            </div>

            <div class="section2">
                <h1 class="f_48" aos="scale-opacity">You can also submit <br>
                    your specific requirements below</h1>
                <div class="form">
                    <div class="item" aos="scale-opacity">
                        <input class="oninput" type="text" placeholder="Name*" id="name">
                        <div class="notice f_18 animated fadeIn">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                fill="none">
                                <mask id="mask0_1659_44" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0"
                                    y="0" width="24" height="24">
                                    <path d="M23.5 0.5H0.5V23.5H23.5V0.5Z" fill="white" />
                                </mask>
                                <g mask="url(#mask0_1659_44)">
                                    <path
                                        d="M12 22C6.47 22 2 17.52 2 12C2 6.47 6.47 2 12 2C17.52 2 22 6.47 22 12C22 17.52 17.52 22 12 22Z"
                                        stroke="#D74E4E" stroke-width="1.5" stroke-linejoin="round" />
                                    <path d="M12 8V12" stroke="#D74E4E" stroke-width="1.5" stroke-linecap="round"
                                        stroke-linejoin="round" />
                                    <path d="M12 16H12.01" stroke="#D74E4E" stroke-width="1.5" stroke-linecap="round"
                                        stroke-linejoin="round" />
                                </g>
                            </svg>
                            <p>Please enter your name</p>
                        </div>
                    </div>
                    <div class="item" aos="scale-opacity">
                        <input class="oninput" type="text" placeholder="Company*" id="company">
                        <div class="notice f_18 animated fadeIn">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                fill="none">
                                <mask id="mask0_1659_44" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0"
                                    y="0" width="24" height="24">
                                    <path d="M23.5 0.5H0.5V23.5H23.5V0.5Z" fill="white" />
                                </mask>
                                <g mask="url(#mask0_1659_44)">
                                    <path
                                        d="M12 22C6.47 22 2 17.52 2 12C2 6.47 6.47 2 12 2C17.52 2 22 6.47 22 12C22 17.52 17.52 22 12 22Z"
                                        stroke="#D74E4E" stroke-width="1.5" stroke-linejoin="round" />
                                    <path d="M12 8V12" stroke="#D74E4E" stroke-width="1.5" stroke-linecap="round"
                                        stroke-linejoin="round" />
                                    <path d="M12 16H12.01" stroke="#D74E4E" stroke-width="1.5" stroke-linecap="round"
                                        stroke-linejoin="round" />
                                </g>
                            </svg>
                            <p>Please enter your company</p>
                        </div>
                    </div>
                    <div class="item" aos="scale-opacity">
                        <input class="oninput" type="text" placeholder="Email*" id="email">
                        <div class="notice f_18 animated fadeIn">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                fill="none">
                                <mask id="mask0_1659_44" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0"
                                    y="0" width="24" height="24">
                                    <path d="M23.5 0.5H0.5V23.5H23.5V0.5Z" fill="white" />
                                </mask>
                                <g mask="url(#mask0_1659_44)">
                                    <path
                                        d="M12 22C6.47 22 2 17.52 2 12C2 6.47 6.47 2 12 2C17.52 2 22 6.47 22 12C22 17.52 17.52 22 12 22Z"
                                        stroke="#D74E4E" stroke-width="1.5" stroke-linejoin="round" />
                                    <path d="M12 8V12" stroke="#D74E4E" stroke-width="1.5" stroke-linecap="round"
                                        stroke-linejoin="round" />
                                    <path d="M12 16H12.01" stroke="#D74E4E" stroke-width="1.5" stroke-linecap="round"
                                        stroke-linejoin="round" />
                                </g>
                            </svg>
                            <p>Please enter your Email</p>
                        </div>
                    </div>
                    <div class="item" aos="scale-opacity">
                        <input class="oninput" type="text" placeholder="Phone*" id="phone">
                        <div class="notice f_18 animated fadeIn">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                fill="none">
                                <mask id="mask0_1659_44" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0"
                                    y="0" width="24" height="24">
                                    <path d="M23.5 0.5H0.5V23.5H23.5V0.5Z" fill="white" />
                                </mask>
                                <g mask="url(#mask0_1659_44)">
                                    <path
                                        d="M12 22C6.47 22 2 17.52 2 12C2 6.47 6.47 2 12 2C17.52 2 22 6.47 22 12C22 17.52 17.52 22 12 22Z"
                                        stroke="#D74E4E" stroke-width="1.5" stroke-linejoin="round" />
                                    <path d="M12 8V12" stroke="#D74E4E" stroke-width="1.5" stroke-linecap="round"
                                        stroke-linejoin="round" />
                                    <path d="M12 16H12.01" stroke="#D74E4E" stroke-width="1.5" stroke-linecap="round"
                                        stroke-linejoin="round" />
                                </g>
                            </svg>
                            <p>Please enter your phone</p>
                        </div>
                    </div>
                    <div class="item msg" aos="scale-opacity">
                        <textarea class="oninput" placeholder="Message*" id="message"></textarea>
                        <div class="notice f_18 animated fadeIn">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                fill="none">
                                <mask id="mask0_1659_44" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0"
                                    y="0" width="24" height="24">
                                    <path d="M23.5 0.5H0.5V23.5H23.5V0.5Z" fill="white" />
                                </mask>
                                <g mask="url(#mask0_1659_44)">
                                    <path
                                        d="M12 22C6.47 22 2 17.52 2 12C2 6.47 6.47 2 12 2C17.52 2 22 6.47 22 12C22 17.52 17.52 22 12 22Z"
                                        stroke="#D74E4E" stroke-width="1.5" stroke-linejoin="round" />
                                    <path d="M12 8V12" stroke="#D74E4E" stroke-width="1.5" stroke-linecap="round"
                                        stroke-linejoin="round" />
                                    <path d="M12 16H12.01" stroke="#D74E4E" stroke-width="1.5" stroke-linecap="round"
                                        stroke-linejoin="round" />
                                </g>
                            </svg>
                            <p>Please enter your message</p>
                        </div>
                    </div>
                    <div class="btn" aos="scale-opacity">
                        <div class="submit f_18">
                            Submit
                        </div>
                    </div>
                </div>
            </div>



        </div>

        <div class="dialog_success animated fadeIn">
            <svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" viewBox="0 0 23 23" fill="none">
                <mask id="mask0_1659_110" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="23"
                    height="23">
                    <path d="M23 0H0V23H23V0Z" fill="white" />
                </mask>
                <g mask="url(#mask0_1659_110)">
                    <path
                        d="M11.5 21.5C5.97 21.5 1.5 17.02 1.5 11.5C1.5 5.97 5.97 1.5 11.5 1.5C17.02 1.5 21.5 5.97 21.5 11.5C21.5 17.02 17.02 21.5 11.5 21.5Z"
                        stroke="white" stroke-width="1.5" stroke-linejoin="round" />
                    <path d="M8 11.5L10.5588 13.5L15.5 8.5" stroke="white" stroke-width="1.5" stroke-linecap="round"
                        stroke-linejoin="round" />
                </g>
            </svg>
            <p>Submitted successfully</p>
        </div>

        <div class="foot">
            <div class="logo">
                <img src="./images/logo.png" alt="">
            </div>
            <div class="d1">
                <div class="l">
                    <div class="item">
                        <p class="p1 f_18">about</p>
                        <div class="aList">
                            <a href="./about.html">Overview</a>
                            <a href="./about.html?id=md1">History</a>
                            <a href="./about.html?id=md2">Client</a>
                        </div>
                    </div>
                    <div class="item">
                        <p class="p1 f_18">products</p>
                        <div class="aList">
                            <a href="./products.html">Hardware</a>
                            <a href="./products.html">Software</a>
                        </div>
                    </div>
                    <div class="item">
                        <p class="p1 f_18">solutions</p>
                        <div class="aList">
                            <a href="./solution_info.html">Smart Library Solutions</a>
                            <a href="./solution_info.html">Automated Book </a>
                            <a href="./solution_info.html">FRID Solutions</a>
                        </div>
                    </div>
                    <div class="item">
                        <p class="p1 f_18">cases</p>
                        <div class="aList">
                            <a href="./cases.html">Public libraries</a>
                            <a href="./cases.html">universities</a>
                            <a href="./cases.html">primary&middle schools</a>
                        </div>
                    </div>
                    <div class="item">
                        <p class="p1 f_18">contact</p>
                        <div class="aList">
                            <a href="./contact.html">Contact us</a>
                        </div>
                    </div>
                </div>
                <div class="r">
                    <p class="p1 f_18">Follow Us</p>
                    <div class="icons">
                        <a href="">
                            <img src="./images/icon1.svg" alt="">
                        </a>
                        <a href="">
                            <img src="./images/icon2.svg" alt="">
                        </a>
                        <a>
                            <img src="./images/icon3.svg" alt="">
                            <div class="code animated fadeIn">
                                <img src="./images/code.png" alt="">
                            </div>
                        </a>
                        <a href="">
                            <img src="./images/icon4.svg" alt="">
                        </a>
                        <a href="">
                            <img src="./images/icon5.svg" alt="">
                        </a>
                        <a href="">
                            <img src="./images/icon6.svg" alt="">
                        </a>
                    </div>
                    <div class="info">
                        E-mail：rfid@sh-rfid.com<br>
                        Tel: +86-21-54262851, 54262853, 54262850<br>
                        Add: No. 810, Yishan Road, Shanghai<br>
                        Hotline: 4000089558
                    </div>
                </div>
            </div>
            <div class="d2">
                <div class="l">
                    © 2024 Zhitu Chuangxiang Co., Ltd. All Rights Reserved
                </div>
                <div class="r">
                    <a href="">Imprint</a>
                    <span></span>
                    <a href="">Privacy Policy</a>
                </div>
            </div>
        </div>


    </div>
    <script src="./js/jquery-3.6.1.min.js"></script>
    <script src="./js/swiper.js"></script>
    <script src="./js/gsap.min.js"></script>
    <script src="./js/ScrollTrigger.min.js"></script>
    <script src="./js/lenis.min.js"></script>
    <script src="./js/aos.js"></script>
    <script src="./js/common.js"></script>
    <script src="./js/swiper.js"></script>
    <script>
        $(function () {

            $('.oninput').on('input', function () {
                if ($(this).val() !== '') {
                    $(this).siblings('.notice').removeClass('show')
                } else {
                    $(this).siblings('.notice').addClass('show')
                }
            })

            $('.oninput').on('focus', function () {
                $(this).siblings('.notice').removeClass('show')
            })

            $('.oninput').on('blur', function () {
                if ($(this).val() !== '') {
                    $(this).siblings('.notice').removeClass('show')
                } else {
                    $(this).siblings('.notice').addClass('show')
                }
            })

            $('.form .submit').click(function () {
                if ($('#name').val() == '') {
                    $('#name').siblings('.notice').addClass('show')
                } else {
                    $('#name').siblings('.notice').removeClass('show')
                }

                if ($('#company').val() == '') {
                    $('#company').siblings('.notice').addClass('show')
                } else {
                    $('#company').siblings('.notice').removeClass('show')
                }

                if ($('#email').val() == '') {
                    $('#email').siblings('.notice').addClass('show')
                } else {
                    $('#email').siblings('.notice').removeClass('show')
                }

                if ($('#phone').val() == '') {
                    $('#phone').siblings('.notice').addClass('show')
                } else {
                    $('#phone').siblings('.notice').removeClass('show')
                }

                if ($('#message').val() == '') {
                    $('#message').siblings('.notice').addClass('show')
                } else {
                    $('#message').siblings('.notice').removeClass('show')
                }

                if($('#name').val()!='' && $('#company').val() != '' && $('#email').val() != '' && $('#phone').val() != '' && $('#message').val() != ''){
                    $('.dialog_success').css({'display':'flex'})
                    setTimeout(()=>{
                        $('.dialog_success').css({'display':'none'})
                    },1000)
                }
            })
        })
    </script>
</body>

</html>